<template>
	<div class="root">
		<div class="imgList">
			<van-uploader :after-read="upload" max-count="20" :max-size="5000 * 1024" @oversize="onOversize">
			  <van-button icon="plus" type="default"></van-button>
			</van-uploader>
			<div class="img" v-for="(item,index) in dataList" :key="index">
				<span class="del-btn" @click="deletePic(item.id)"><i class="iconfont icon-shanchu"></i></span>
				<img :src="item.img" alt="">
			</div>
		</div>
	</div>
</template>

<script>
import { Notify } from 'vant';
let Base64 = require('js-base64').Base64
export default {
	data(){
		return{
			dataList:[],
			fileList:[]
		}
	},
	methods:{
		getinfo(){
			let user_id = this.$route.query.user_id
			this.$axios.post('user/classic',{user_id})
			.then(res=>{
				this.dataList = res.data.data.classic
			})
		},
		// 上传图片
		upload(file){
			// console.log(Base64.decode(file.content.split(',')[1]))
			// console.log(file.content.split(',')[1])
			// let fileList = this.fileList
			// console.log(fileList[0].content.replace(/^data:image\/\w+;base64,/, ''))
			this.$axios.post('user/upimg',{
				image:file.content,
				user_id:this.$route.query.user_id
			})
			.then(res=>{
				if(res.data.code==2000){
					this.$axios.post('user/classicimg',{
						img:res.data.data.img_url,
						user_id:this.$route.query.user_id
					})
					.then(res=>{
						if(res.data.code==2000){
							this.getinfo()
						}
					})
				}
			})
		},
		// 上传前置 检查文件格式
		// befroeUp(file){
		// 	console.log(file)
		// 	this.upload(file)
		// },
		// 限制上传大小
		onOversize(file){
			Notify({ type: 'warning', message: '图片大小不能超过5Mb' });
		},
		// 删除图片
		deletePic(id){
			this.$axios.post('user/delete_classic',{id})
			.then(res=>{
				if(res.data.code==2000){
					Notify({ type: 'success', message: '删除成功' });
					this.getinfo()
				}else{
						Notify({ type: 'warning', message: '删除成功' });
				}
			})
		}
	},
	created() {
		this.getinfo()
	}
}
</script>

<style scoped lang="less">
	.root{
		padding: 2rem;
		.imgList{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			.van-uploader{
				.van-button{
					width: 25vw;
					height: 25vw;
					margin-left: .65rem;
					.van-icon{
						font-size: 2rem;
					}
				}
			}
			.img{
				width: 25vw;
				height: 25vw;
				border: 1px dotted #eee;
				position: relative;
				margin-bottom: 0.5rem;
				margin-left: .5rem;
				.del-btn{
					width: 1.5rem;
					height: 1.5rem;
					position: absolute;
					bottom: 5px;
					right: 5px;
					display: inline-block;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 2rem;
					background: rgba(0,0,0,.2);
					i{
						color: #f9f9f9;
						font-size: 0.85rem;
					}
				}
				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
</style>
